<template>
	<view>
		<uni-forms>
			<uni-section title="审核流程及审核员设置" type="line">
				<button type="default" size="mini" v-if="!isEdit" style="margin: 0 auto;background-color: #007aff; color: #fff;" @click="edit">编辑</button>
				<button type="default" size="mini" v-else style="margin: 0 auto;background-color: red; color: #fff;" @click="cacleEdit">取消</button>
			</uni-section>
			<view style="width: 95%; margin: 10rpx auto;">
				<text class="tips">tips:团队成员的报销单将按照以下设置的审核流程进行审核，审核流程完成后报销单据将发送到负责报销的人员那里进行报销，请根据需要进行设置，审核流程最多不超过四级，建议设置1级或2级</text>
				<text class="tips">如需修改请点击右上角编辑按钮</text>
			</view>
			<uni-table ref="table" :loading="loading" stripe emptyText="暂无审核人员" v-for="(auditorList, key) in auditors" :key="key">
				<uni-tr>
					<uni-th width="100" align="center">级别</uni-th>
					<uni-th align="center"width="160">审核员</uni-th>
					<uni-th  align="center">操作</uni-th>
				</uni-tr>
				<uni-tr  v-for="(auditor,index) in auditorList.employees" :key="index">
					<uni-td align="center">
						<text v-if="!isEdit">级别{{ auditor.auditLevel }}</text>
						<uni-data-picker
						v-else
						placeholder="级别" 
						:localdata="auditLevel" 
						v-model="auditor.auditLevel" />
					</uni-td>
					<uni-td align="center">
						<text v-if="!isEdit">{{ auditor.realName == '' || auditor.realName == null ? auditor.nickName : auditor.realName }}</text>
						<uni-data-picker
						v-else
						placeholder="员工" 
						:localdata="employee" 
						v-model="auditor.id" />
					</uni-td>
					<uni-td>
						<view class="uni-group" style="text-align: center;">
							<button class="uni-button" size="mini" :disabled="!isEdit" type="warn" @click="delAuditor(index,key)" style="vertical-align: middle;">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view style="width: 100%; text-align: center;margin: 15px auto;">
				<button v-if="team.openControl == 'OPEN'"
				type="default" 
				size="mini" 
				:disabled="!isEdit"
				:style="isEdit ? style.edit : style.disable" 
				@click="openAddForm">增加审核员</button>
			</view>
			<view style="width: 95%; margin: 10rpx auto;">
				<text class="tips">tips:负责报销的人员应当与审核人员不同，一般由团队的财会人员担任</text>
				<uni-forms-item label-align="right" label="报销人员:">
					<uni-data-picker
					placeholder="员工" 
					:localdata="employee" 
					@change="changeReim"
					v-model="reimbursement.id" />
				</uni-forms-item>
			</view>
		</uni-forms>
		<button v-if="team.openControl == 'OPEN'"
		type="primary" 
		:disabled="!isEdit"
		style="margin: 0 10upx 50upx 10upx;background-color: #007aff;" 
		@click="submit">提交</button>
		<xy-dialog
		title="审核人员" 
		:show.sync="showDialog"
		@cancelButton="clickCancel()"
		@confirmButton="addAuditor()">
			<view style="padding: 0 30upx 30upx;">
				<uni-forms ref="addForm" labelAlign="left" :rules="rules" :modelValue="category">
					<uni-forms-item label="级别:" required name="name">
						<uni-data-picker
						placeholder="级别" 
						:localdata="auditLevel" 
						v-model="addAuditorData.auditLevel" />
					</uni-forms-item>
					<uni-forms-item label="审核员:" name="auditor">
						<uni-data-picker
						placeholder="员工" 
						:localdata="employee" 
						@change="changeAuditor"
						v-model="addAuditorData.employeeId" />
					</uni-forms-item>
				</uni-forms>
				<button id="submit-button" type="default" :plain="true" @click="addAuditor()"></button>
			</view>
		</xy-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDialog: false,
				style: {
					edit: 'background-color: #007AFF;color: #fff;',
					disable: 'background-color: grey;color: #fff;'
				},
				isEdit: false,
				team: {},
				user: {},
				employee: [],
				auditLevel: [],
				auditors: [],
				addAuditorData: {
					auditLevel: '',
					employeeId: '',
					employee: {}
				},
				reims: [],
				reimbursement: {
					id: '',
					employee: {}
				},
			}
		},
		onLoad(ev){
			this.getTeamById(ev.id);
			this.getEmployee(ev.id);
			this.getAuditors(ev.id);
			this.user = this.$dry.get("user");
		},
		onShow(){
			this.getEmployee(this.team.id);
		},
		methods: {
			clickCancel() {
				this[`showDialog`] = false;
			},
			changeAuditor(e) {
				console.log(e);
				this.addAuditorData.employee = e.detail.value[0].employee;
				this.addAuditorData.employee.auditLevel = this.addAuditorData.auditLevel;
				this.addAuditorData.employee.duty = 'AUDITOR';
			},
			changeReim(e) {
				// console.log(e);
				this.reimbursement.employee = e.detail.value[0].employee;
				this.reimbursement.employee.duty = 'REIMBURSEMENT';
			},
			edit(){
				if(this.user.userId == this.team.owner) {
					this.isEdit = true;
				} else {
					uni.showToast({
						title: '无权限'
					})
				}
			},
			cacleEdit() {
				this.isEdit = false;
			},
			getAuditors(teamId){
				var token = this.$dry.getToken();
				if(token) {
					var data = this.$request.run("getAuditorByTeam", token);
					uni.request({
						url: data.url,
						method: data.menthod,
						header: data.header,
						data: {
							"teamId": teamId
						},
						success: data => {
							// console.log(data);
							if(data.statusCode === 200) {
								var auditors = data.data;
								this.auditors = auditors;
								if(auditors.length > 0) {
									var newItems = [];
									auditors.forEach(a => {
										newItems.push({
											text: '级别' + a.auditLevel,
											value: a.auditLevel,
											employee: a
										})
									})
									this.auditLevel = newItems;
								}
							}
						}
					})
				}
			},
			getTeamById(id){
				var token = this.$dry.getToken();
				if(token){
				    var data = this.$request.run("getTeamById",token);
				    uni.request({
				    	url: data.url,
				    	method: data.method,
				    	header: data.header,
				    	data: {
							"id": id
						},
				    	success: data => {
							if(data.statusCode === 200) {
								this.team = data.data;
							}
						}
					})
				}
			},
			getEmployee(id) {
				var token = this.$dry.getToken();
				if(token){
					var teamId = id;
					if(!id) {
						teamId = this.team.id;
					}
					var data = this.$request.run("listEmployeeByConditions",token);
				    uni.request({
				    	url: data.url,
				    	method: data.method,
				    	header: data.header,
				    	data: {
							"teamId": teamId,
							"employeeStatus": 'TEAM'
						},
				    	success: data => {
				    		var worker = data.data;
							var newItems = [];
							if(worker.length != 0){
								worker.forEach(e => {
									newItems.push({
										text: e.realName == null || e.realName == '' ? e.nickName : e.realName,
										value: e.id,
										employee: e
									});
								});
							}
							this.employee= newItems;
				    	},
				    	fail: (data, code) => {
				    		console.log('fail' + JSON.stringify(data));
				    	}
				    })
				}
			},
			openAddForm() {
				this[`showDialog`] = true;
			},
			addAuditor() {
				this.auditors.forEach(auditor => {
					if(auditor.auditLevel === this.addAuditorData.auditLevel) {
						auditor.employees.push(this.addAuditorData.employee);
					}
				})
				this.showDialog = false;
			},
			delAuditor(index,key) {
				//console.log(index);
				this.auditors[key].employees.splice(index, 1)
			},
			submit(){
				var employees = [];
				if(this.auditors.length > 0) {
					this.auditors.forEach(a => {
						if(a.employees.length > 0) {
							employees.push(a.employees);
						}
					})
				}
				if(this.reimbursement.employee != {}) {
					employees.push(this.reimbursement.employee);
				}
				var token = this.$dry.getToken();
				if(token) {
					var data = this.$request.run("updateDuty", token);
					uni.request({
						url: data.url,
						method: data.menthod,
						header: data.header,
						data: employees,
						success: data => {
							if(data.code === 0) {
								uni.showToast({
									title: "操作成功"
								})
							}
						}
					})
				}
				this.getEmployee();
				this.isEdit = false;
			}
		}
	}
</script>

<style>
	.cost-dynamic-box {
		margin-bottom: 15px;
		width: 100%;
	}
	.tips{
		padding:10rpx 20rpx;
		text-align: left;
		font-size: 24rpx;
		color: #0077AA;
	}
</style>
